<template>
	<view class="content">
		<view class="head-box" :style="{paddingTop:data.statusBarHeight+'rpx'}">
			<view class="nav" @click="complete">完成</view>
			<view class="flex-align-center jieguo">
				<img class="success" src="../../../static/img/img/success.png" alt="">
				<text class="jieg-text">加入结果</text>
			</view>
		</view>
		<!-- jine -->
		<view class="info-box">
			<view class="je-box">
				<text class="title">合计金额</text>
				<view class="">
					<text class="fuhao">￥</text>
					<text class="jine">{{data.info.price}}</text>
				</view>
			</view>
			<vipCard type='join' :item="data.info"></vipCard>
			<view class="cre-order">订单创建时间：{{data.curretDate}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		useStatusBarStore
	} from "@/store/index";
	import vipCard from "@/compoments/vip/vipCard.vue";
	const statusBar = useStatusBarStore();
	const data = ref({
		statusBarHeight: 0,
		info: {},
		curretDate: '',
	})
	onLoad((e) => {
		data.value.info = JSON.parse(e.info);
		data.value.curretDate = getCurrentDate();
	})
	onShow(() => {
		data.value.statusBarHeight = statusBar.getStatusBarHeight();

	});
	//获取当前时间
	const getCurrentDate = () => {
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let days = date.getDate();
		let hours = date.getHours();
		let minutes = date.getMinutes();
		let seconds = date.getSeconds();
		return year + "-" + month + "-" + days + "  " + hours + ":" + minutes + ":" + seconds
	};
	//完成
	const complete = () => {
		uni.reLaunch({
			url:'/pages/member/member'
		})
		// console.log(getCurrentPages())
		// uni.navigateBack({
		// 	delta: 2
		// })
	};
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.head-box {
		width: 100vw;
		height: 300rpx;
		background-color: #3C66F6;

	}

	.nav {
		height: 88rpx;
		padding: 0 74rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		color: #FFFFFF;
	}

	.jieguo {
		padding: 0 74rpx;

		.success {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;

		}

		.jieg-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.info-box {
		padding: 0 52rpx;

		.je-box {
			width: 100%;
			height: 180rpx;
			background: #fff;
			border-radius: 20rpx;
			position: relative;
			margin-top: -40rpx;
			padding: 26rpx 28rpx;
			margin-bottom: 20rpx;

			.title {
				font-size: 24rpx;
				color: #A5A5A5;
			}

			.fuhao {
				font-size: 48rpx;
				font-weight: bold;
				color: #2C2C2C;
			}

			.jine {
				font-size: 72rpx;
				font-weight: bold;
				color: #2C2C2C;
			}

		}

		.cre-order {
			margin-top: 20rpx;
			width: 100%;
			height: 60rpx;
			background-color: #FFFFFF;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #A5A5A5;
			padding: 0 28rpx;
		}
	}
</style>